<template>
    <div class="item-wrap">
        <div class="image-wrapper">
            <img :src="item.image_url" alt="">
        </div>
        <div class="text-wrapper">
            <div class="name-box">
                <div class="name">
                    <span>{{ item.name }}</span>
                    <span style="color: #9f9d9d;" v-if="item.num">({{ item.num }})</span>
                </div>
                <p v-if="item.desc" class="desc">{{ item.desc }}</p>
            </div>
            <i v-if="is_arrows" class="arrows iconfont icon-youjiantou"></i>
        </div>
    </div>
</template>

<script lang="ts" setup>
import type { ContactItem } from '@/types/user'

withDefaults(defineProps<{
    item: ContactItem,
    is_arrows?: boolean
}>(), {
    item: () => {
        return {
            avatar_url: 'src/assets/images/my_avatar.png',
            name: '',
        }
    },
    is_arrows: false
    
})
</script>

<style scoped lang="scss">
.item-wrap {
    display: flex;
    align-items: center;
    .image-wrapper {
        width: 50px;
        height: 50px;
        line-height: 50px;
        border-radius: 5px;
        text-align: center;
        overflow: hidden;
        img {
            width: 80px;
            height: 80px;
        }
    }
    .text-wrapper {
        flex: 1;
        margin-left: 15px;
        color: #000;
        font-size: 18px;
        border-bottom: 1px solid #EDEDED;
        padding: 20px 0;

        display: flex;
        justify-content: space-between;

        .name-box {
            .desc {
                &:last-child {
                    color: #9f9d9d;
                    padding-top: 5px
                }
            }
        }
        .arrows {
            font-size: 14px;
            color: #EDEDED;
        }
    }
}
</style>